<template>
	<view class="main-box">
		<view class="my-date" >
			<view class="my-date-input" style="padding-left:30rpx;width: 100%;"
				@click="change">
				<view style="margin-right: 30rpx; color: #fff">
					{{ valueTime }}
				</view>
				<u-image width="40rpx" height="40rpx" bgColor="red" src="../../../static/images/dateTime.png">
				</u-image>
				
			</view>
		</view>
		<view class="u-page__item" style="margin:0 32rpx;background:#fff; min-height:520px;border:1rpx solid #DCDFE7">
			<u-image v-if="viewList.length === 0" style="margin-top: 120rpx;" width="100%" height="600rpx" src="../../../static/images/nodata.png">
			</u-image>
			<view class="box my-uni-form" v-else>
				<view v-for="(viewItem, index) in viewList" :key="viewItem.id">
					<view class="my-title-box">
						<view class="my-title-item-box">
							<view style="display: flex; align-items: center">
								<u-image width="20rpx" height="20rpx" :src="
                    viewItem.checked
                      ? '../../../static/images/yuan_a.png'
                      : '../../../static/images/yuan_aa.png'
                  "></u-image>
								<text class="title" style="margin-left: 20rpx">
									{{ changeTimeDate(viewItem.createTime) }}工作日报
								</text>
							</view>
						</view>
						<view class="callape-btn" @click="isShowClick(index, viewItem.checked)">
							{{ viewItem.checked ? '收回' : '展开' }}</view>
					</view>
					<view :style="{'padding': (viewItem.checked ? '30rpx':'')}">
						<view class="details" :class="viewItem.checked && 'u-page__item_daily'"
							v-show="viewItem.checked">
							<view class="waterMark">{{userName}}&ensp;{{lookDate}}</view>
							<view v-for="(infoItem, index) of viewItem.Content" :key="index">
								<view class="form-view-title" v-if="infoItem.info">
									{{ index + 1 }}.{{ infoItem.info }}</view>
								<view class="imgDetails">
				   				 <view style="	          
				                 width:540rpx;margin: 0 10rpx 20rpx 10rpx;
				                 " v-for="(srcItem, index) of infoItem.imgUrl" :key="srcItem.key">
				                 	<image v-if="fileFormatHandle(srcItem.url) != 'mp4'" style="
				                        width: 100%; border: 1px solid #eee; " mode= "widthFix"
					                     @click="previewImg(srcItem.url, index)" :lazy-load="true" :webp="true"
											:src="srcItem.url ? srcItem.url : ''">
										</image>
										<video style="
											width: 100%; 
											min-height: 400rpx;
											border: 1px solid #eee;
										 " v-if="fileFormatHandle(srcItem.url) == 'mp4'" direction="0" :src="srcItem.url">
							   		</video>
									</view>
								</view>
							</view>
							<view class="waterMark">{{userName}}&ensp;{{lookDate}}</view>
						</view>
					</view>

				</view>
			</view>
		</view>
		<u-datetime-picker :show="timeShow" @cancel="timeCancel" @confirm="timeConfirm" v-model="value" mode="date">
		</u-datetime-picker>
	</view>
</template>
<script>
	import {getDailyList,getSelectDailyByUserId} from '@/service/services.js'
	import {mapState} from 'vuex'
	import {convertToChinaNum} from '@/utils/convertToChinaNum.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				valueTime: '请选择日期',
				timeShow: false,
				value: moment(new Date()).format('YYYY-MM-DD'),
				viewList: [], // 保存消息列表
				userName:'',
				lookDate:moment(new Date()).format('YYYY-MM-DD')
			}
		},
		onLoad() {
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden',
			})
		},
		computed: mapState({
			userInfo(item) {
				return item.userInfo
			},
		}),
		mounted() {
			this.getData({
				leaderid: this.userInfo.userId,
				status:0
			})
			this.userName=this.$store.state.userInfo.userName 
		},
		methods: {
			fileFormatHandle(fileName) {
				return fileName.substring(fileName.lastIndexOf('.') + 1)
			},
			changeNum(num) {
				return convertToChinaNum(num)
			},
			getData(item) {
				this.viewList = []
				getSelectDailyByUserId(item).then((res) => {
					console.log(res,555);
					
					if (res.code === 200 && res.data.length)
						res.data.forEach((item, index) => {
							this.viewList.push({
								id: item.id,
								userName: item.userName,
								createTime: item.createTime,
								checked: false,
								Content: [{
										key: Math.random() + item.content1,
										info: item.content1,
										describe1: item.describe1,
										imgUrl: [],
									},
									{
										key: Math.random() + item.content2,
										info: item.content2,
										describe2: item.describe2,
										imgUrl: [],
									},
									{
										key: Math.random() + item.content3,
										info: item.content3,
										describe3: item.describe3,
										imgUrl: [],
									},
								],
							})
							if (item.file1) {
								if (item.file1.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[0].imgUrl = [{
										key: Math.random(),
										url: item.file1,
									}, ]
								} else {
									const strArr = item.file1
										.substring(0, item.file1.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[0].imgUrl = imgList
								}
							}
							if (item.file2) {
								if (item.file2.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[1].imgUrl = [{
										key: Math.random() + item.file2,
										url: item.file2,
									}, ]
								} else {
									const strArr = item.file2
										.substring(0, item.file2.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[1].imgUrl = imgList
								}
							}
							if (item.file3) {
								if (item.file3.indexOf(';', index + 1) === 1) {
									this.viewList[index].Content[2].imgUrl = [{
										key: Math.random(),
										url: item.file3,
									}, ]
								} else {
									const strArr = item.file3
										.substring(0, item.file3.lastIndexOf(';'))
										.split(';')
									const imgList = []
									strArr.forEach((info, index) => {
										imgList.push({
											key: Math.random(),
											url: info,
										})
									})
									this.viewList[index].Content[2].imgUrl = imgList
								}
							}
						})
				})
			},
			//预览图片，放大预览
			previewImg(currentUrl, index) {
				let imgsArray = []
				imgsArray[0] = currentUrl
				uni.previewImage({
					current: 0,
					urls: imgsArray,
				})
			},
			change() {
				this.timeShow = true
			},
			timeCancel() {
				this.timeShow = false
			},
			timeConfirm(e) {
				this.valueTime = this.changeTimeDate(e.value)
				this.getData({
					leaderid: this.userInfo.userId,
					createDate: this.valueTime,
					status:0
				})
				this.timeShow = false
			},
			changeTimeDate(timeData) {
				return moment(timeData).format('YYYY-MM-DD')
			},
			// 点击是否显示全文
			isShowClick(index, checked) {
				this.viewList[index].checked === true ?  this.viewList[index].checked = false : this.viewList[index].checked = true;
			},
		},
	}
</script>
<style>
	page {
		background-color: #F5F9FF;
	}
</style>
<style lang="scss" scoped>
	.u-page__item .box {
	    margin-bottom: 32rpx;
	}

	.u-page__item__title__slot-title {
		height: 80rpx;
		line-height: 80rpx;
	}

	.u-page__item_daily {
		background: #f8f8f8;
		border: 1rpx solid #d1d7df;
		box-shadow: 0px 2rpx 8rpx 0px #d0d6df;
		border-radius: 1rpx;
		padding: 30rpx;
		min-height: 400rpx;
	}

	.view_img {
		display: flex;
		flex-wrap: wrap;

		// justify-content: center;
		.view_img_item {
			margin: 10rpx 4px 0rpx 4rpx;
		}
	}

	.message_icon {
		width: 20rpx;
		height: 20rpx;
		background: #2b4fa3;
		border-radius: 50%;
		display: inline-block;
		margin-right: 22rpx;
	}

	.u-page {
		padding: 0;

		&__item {
			

			&__title {
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					font-size: 14px;
				}
			}
		}
	}

	.imgDetails {
		display: flex;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}

	.my-date {
		position: relative;
		display: flex;
		margin: 0 32rpx;
		padding: 17rpx 0;
		height: 70rpx;
		background: #05163E;
		
	}

	.title {
		font-size: 30rpx;
		color: #606c81;
		margin-left: 20rpx;
	}

	.main-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;

		.my-title-box {
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #d6dfec;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: white;
		}

		.my-title-item-box {
			font-weight: bold;
			display: flex;
			color: #606c81;
			align-items: center;
		}

		.textDetails {
			margin: 20rpx 0rpx 32rpx 0rpx;
			height: 24rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #606c81;
			line-height: 30rpx;
		}
	}

	.topImg {
		width: 100%;
	}

	.containerBody {
		position: relative;
		flex: 1;
		margin: -60rpx 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		border: 2rpx solid #ddd;
		z-index: 2;
		border-radius: 20rpx;
		background: #fff;
	}

	.bottomImg {
		height: 126rpx;
		border-radius: 10rpx;
		position: absolute;
		bottom: -6rpx;
		width: 100%;
	}
	.font {
		font-weight: bold;
	}
	.waterMark{
		color: #E0E0E0;
		transform: rotate(-45deg);
		opacity: 0.5;
		width: 300rpx;
      margin-left: 113rpx;
	}
</style>
